<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>vue3中没有数据改变,视图不更新问题</title>
</head>
<body>
<!-- 引入vue3静态文件  vue.global.js -->
<script src="https://unpkg.com/vue@3"></script>

<div id="app">
  <p>{{ num }}</p>
  <p>{{ num2 }}</p>
  <button class="btn" @click="btn1Click">修改数据</button>

</div>

<script>

  //vue3中初始化
  const { createApp } = Vue
  createApp({
    data() {
      return {
        num:[18],
		num2:{a:18}
      }
    },
	methods:{
			 //vue3中给数组和对象新增属性赋值，数据视图改变不会受影响
            btn1Click:function(){
			    //数组新增属性，不受影响
				  this.num[0]=20;
				//   this.num[0]++;
				 console.log(42,this.num)
		
				 // 对象新增属性，不受影响
				//   this.num2['b']=22;
				//   console.log(this.num2);
				
            } 
        },
  }).mount('#app')
</script>


</body>
</html>